import React, { useState,useRef,useEffect} from "react";
import { Select, Form, Button, Dropdown, Space} from 'antd';
const OPTIONS = ['全部', '与报表校验', '表内交叉校验', '表内其他校验','表间校验','跨报表项目校验'];
const RESULT_OPATIONS = ['全部', '校验不通过', '强制校验不通过', '非强制校验不通过',"差异数项目","逻辑不符项目"];
import DevTreeList from "~/public/cpas-ui/components-ui/express-components/DevListTree";
import "./_index.less"
import {
  fetchReportList,
  getAllData
} from "../tab1/server";

import { getDataId } from "~/public/cpas-business/tools/Tools"
import { useModel } from "umi";
import { defaultColumns } from "./defaultData";
import type { MenuProps } from 'antd';
const TabPageTwo = () => { 
  // const [form] = Form.useForm();
  const { initialState } = useModel('@@initialState');
  const { dbname } = initialState?.curPart as API.CurPart; 
  const treeRef = useRef<any>(null)

  const [selectedItems, setSelectedItems] = useState<string[]>([]);
  const [resultItems, setResultItems] = useState<string[]>([]);
  const [newDate, setNewDate] = useState<string>("")
  const [reportResult, setReportResult] = useState<string[]>(["全部"])
  const [reportItem, setReportItem] = useState<string[]>([])
  
  const filteredOptions = OPTIONS.filter((o) => !selectedItems.includes(o));
  const filteredResultOpations = RESULT_OPATIONS.filter((o) => !resultItems.includes(o))
  const filteredReportOpation = reportResult.filter((o)=>!reportItem.includes(o))
  // 当前年份
  const getYearData = async () => {
    const data = await getDataId()
    setNewDate(data)
  }
  // 报表项目
  const getReportProject = async () => {
    const params = {
      dbName:dbname,
      year: newDate
    }
    const res = await fetchReportList(params)
    const { data} = res
    if (res.ok) { 
      data.map((item: any) => { 
        reportResult.push(item.itemName)
        setReportResult([...reportResult])
      })
    }
    
  }
  // 汇总数据
  const fetchAllVerifyData = async () => {
    const params = {
      dbname,
      data_id: newDate
    }
    const data = await getAllData(params)
    console.log(data);
    
  }
  const items: MenuProps['items'] = [
    {
      key: '1',
      type: 'group',
      label: 'Group title',
      children: [
        {
          key: '1-1',
          label: '1st menu item',
        },
        {
          key: '1-2',
          label: '2nd menu item',
        },
      ],
    },
    {
      key: '2',
      label: 'sub menu',
      children: [
        {
          key: '2-1',
          label: '3rd menu item',
        },
        {
          key: '2-2',
          label: '4th menu item',
        },
      ],
    },
    {
      key: '3',
      label: 'disabled sub menu',
      disabled: true,
      children: [
        {
          key: '3-1',
          label: '5d menu item',
        },
        {
          key: '3-2',
          label: '6th menu item',
        },
      ],
    },
  ];
  const handleChange = () => { }
  useEffect(() => {
    // getYearData()
    // getReportProject()
    // fetchAllVerifyData()
   },[])
  return (
    <div className="summary">
      <h1 className="title">附注趋势分析</h1>
      <div className="form-layout">
        <Form layout="inline">
          <Form.Item label="报表项目">
            <Select
              // mode="multiple"
              placeholder="请选择报表项目"
              value={reportItem}
              style={{ width: '200px' }}
              onChange={setReportItem}
              options={filteredReportOpation.map((item) => ({
                value: item,
                label: item,
              }))}
            />
          </Form.Item>
          <Form.Item label="附注行">
            <Select
              // mode="multiple"
              placeholder="请选择附注行"
              value={resultItems}
              style={{ width: '200px' }}
              onChange={setResultItems}
              options={filteredResultOpations.map((item) => ({
                value: item,
                label: item,
              }))}
            />
          </Form.Item>
          <Form.Item label="重大变动项目">
            <span className="total">10000</span>
          </Form.Item>
        </Form>
        <Form layout="inline">
          <Form.Item label="指标">
            <Select
              defaultValue=""
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                { value: '', label: '全部' },
                { value: '1', label: '横向趋势分析' },
                { value: '2', label: '纵向趋势分析' },
              ]}
            />
          </Form.Item>
          <Form.Item >
          <Dropdown menu={{ items }}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                附注行配置
              </Space>
            </a>
          </Dropdown>
          </Form.Item>
          
        </Form>
      </div>
      <div>
        <DevTreeList.Default
          className="tree-default"
          ref={treeRef}
          // dataSource={ReportData}
          rootValue='0'
          keyExpr="code"
          parentIdExpr="pCode"
          width="100%"
          id="GUID"
          height="99%"
          defaultColumns={defaultColumns}
          showRowLines={true}
          showBorders={true}
          columnAutoWidth={true}
          // onCellClick={onCellDblClick}
        />
      </div>
    </div>
  )
}

export default TabPageTwo